<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>修改用户信息</title>
	<link rel="stylesheet" href="../statics/bootstrap-3.3.0/css/bootstrap.css">
	<link rel="stylesheet" href="../statics/jquery-ui-1.12.1/jquery-ui.css">
	<link rel="stylesheet" href="../statics/jquery-ui-1.12.1/jquery-ui.theme.css">
	<link rel="stylesheet" href="../statics/css/style.css">
	<script src="../statics/jquery-1.12.4/jquery-1.12.4.js"></script>
</head>

<body>
	<div id="header"></div>
	<div class="container" style="position: relative; transform: translate(0, 0)">
		<div class="col-md-9" style="float: left;">
			<div class="col-md-12 r1" style="background-color: #e4e4e4; height: 40px">
				<div class="col-md-6" style="margin-top: 5px">
					<B style="color: #c4c4c4; font-size: 20px">修改信息</B>
				</div>
			</div>
			<div class="col-md-12 r2" style="background-color: #f9f9f9; padding: 30px; margin-bottom: 15px">
				<label for="photo" class="control-label">头像</label>
					<div class="col-md-12" style="padding-left: 0px; padding-bottom: 10px">

						<div class="col-md-4">
							<img src="user.photoUrl" id="img" height="150px" width="150px">
						</div>
						<div class="col-md-4" style="padding-left: 0px; padding-top: 50px">
								<input id="photo" style="margin-top: 10px" type="file" name="photo"/>
							<input type="submit"  value="上传" onclick="submitProfileImage(this)"/>
							<output id="photoResult" itemid="status" style="color: greenyellow" value=""></output>

						</div>
					</div>
					<div class="form-group">
						<label for="name" class="control-label">姓名</label>
						<input id="name" class="form-control"></input>
						<output id="nameError" itemid="status" style="color: red"></output>
					</div>
					<div class="form-group">
						<label for="gender" class="control-label">性别</label>
						<select name="gender" id="gender" class="form-control">
							<option value="男">男</option>
							<option value="女">女</option>
						</select>
					</div>
					<div class="form-group">
						<label for="mobile" class="control-label">手机</label>
						<input id="mobile" class="form-control" onblur="checkPhoneRepeat()"></input>
						<output id="phoneError" itemid="status" style="color: red"></output>
					</div>
					<div class="form-group">
						<p id="oldEmail" hidden></p>
						<label for="email" class="control-label">邮箱</label>
						<input id="email" class="form-control" onblur="checkEmailRepeat()"></input>
						<output id="emailError" itemid="status" style="color: red" value=""></output>
					</div>
					<div class="form-group">
						<button onclick="submitInfo()" type="submit" class="btn btn-primary">确定</button>
						<a class="btn btn-success pull-right" onClick="javascript :history.back(-1);">返回</a>
					</div>
			</div>
			<div class="col-md-12 r1" style="background-color: #e4e4e4; height: 40px">
				<div class="col-md-6" style="margin-top: 5px">
					<B style="color: #c4c4c4; font-size: 20px">修改密码</B>
				</div>
			</div>
			<div class="col-md-12 r2" style="background-color: #f9f9f9; padding: 30px; margin-bottom: 15px">
				<div id="sec" class="col-md-12" style="padding: 15px;">
					<div class="form-group">
						<label for="oldPass">原密码</label>
						<input id="oldPass" class="form-control" type="password" onblur="checkPassword(this)">
						<output id="passwordError" itemid="status" style="color: red" value=""></output>
					</div>
					<div class="form-group">
						<label for="newPass1">新密码</label> <input id="newPass1" class="form-control" type="password">
					</div>
					<div class="form-group">
						<label for="newPass2">确认密码</label> <input id="newPass2" class="form-control" type="password" onblur="checkPassRepeat(this)">
						<output id="passError" style="color: red"></output>
					</div>
					<button onclick="submitPass()" class="btn btn-primary">确认修改</button>
				</div>
			</div>
		</div>
		<div id="re-bar" class="col-md-3" style="padding-left: 0px; padding-right: 0px;">
<!--			<div class="col-md-12 r1"-->
<!--				style="background-color: #e4e4e4; height: 40px; padding-left: 0px; padding-right: 0px;">-->
<!--				<div id="review-bar" class="col-md-6 rev1-bar" align="center" onclick="reviewButton()">-->
<!--					<B style="font-size: 16px; color: #c4c4c4">收到的评论</B>-->
<!--				</div>-->
<!--				<div id="reply-bar" class="col-md-6 rev2-bar" align="center" onclick="replyButton()">-->
<!--					<B style="font-size: 16px; color: #c4c4c4">收到的回复</B>-->
<!--				</div>-->
<!--			</div>-->
			<div class="col-md-12 r2" style="background-color: #f9f9f9; padding-bottom: 15px">
<!--				<div id="review-body" class="col-md-12 r3"-->
<!--					style="display: none; overflow-y: auto; height: 595px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 15px;">-->
<!--					&lt;!&ndash; 当满足条件<c:when test="${reviews.size() == 0}"> &ndash;&gt;-->
<!--					<div class="col-md-12" align="center" style="background-color: #ffffff;">-->
<!--						<img src="../statics/image/logo/yihan.png" width="95%" ; height="170px;">-->
<!--						<p style="color: #c4c4c4; font-size: 16px">抱歉，暂无评论消息！</p>-->
<!--					</div>-->
<!--					<a target="_blank" href="/wzh-secondshop/review?goodId=${review.goodId}&reviewId=${review.id}">-->
<!--						<div class="col-md-12 rev" style="padding-left: 0px; padding-right: 0px; margin-bottom: 5px;">-->
<!--							<div class="col-md-11">-->
<!--								<p></p>-->
<!--								<p style="color: #c4c4c4;">${review.uploadDate}</p>-->
<!--								<p>-->
<!--									<B style="color: #2aabd2">${review.fromUser}</B>&nbsp;评论了你的物品-->
<!--								</p>-->
<!--							</div>-->
<!--							<div class="col-md-1" style="padding-right: 0px">-->
<!--								<img src="../statics/image/logo/yihan.png" height="30px" width="25px" align="right">-->
<!--							</div>-->
<!--						</div>-->
<!--					</a>-->

<!--				</div>-->

<!--				<div id="reply-body" class="col-md-12 r3"-->
<!--					style="display: none; overflow-y: auto; height: 595px; background-color: #ffffff; padding-left: 5px; padding-right: 5px; padding-top: 5px; padding-bottom: 15px;">-->
<!--					<div class="col-md-12" align="center" style="background-color: #ffffff;">-->
<!--						<img src="../statics/image/logo/yihan.png" width="95%" ; height="170px;">-->
<!--						<p style="color: #c4c4c4; font-size: 16px">抱歉，暂无回复消息！</p>-->
<!--					</div>-->
<!--					<a target="_blank" href="/wzh-secondshop/reply?reviewId=${reply.reviewId}&replyId=${reply.id}">-->
<!--						<div class="col-md-12 rev" style="padding-left: 0px; padding-right: 0px; margin-bottom: 5px;">-->
<!--							<div class="col-md-11">-->
<!--								<p></p>-->
<!--								<p style="color: #c4c4c4;">reply.uploadDate</p>-->
<!--								<p>-->
<!--									<B style="color: #2aabd2">reply.fromUser</B>&nbsp;回复了你的消息-->
<!--								</p>-->
<!--							</div>-->
<!--							<div class="col-md-1" style="padding-right: 0px">-->
<!--								<img src="../statics/image/logo/yihan.png" height="30px" width="25px" align="right">-->
<!--							</div>-->
<!--						</div>-->
<!--					</a>-->
<!--				</div>-->
				<div id="adv-bar" class="col-md-12" style="margin-top: 5px; padding: 0px;">
					<div class="col-md-12" align="center">
						<B style="font-size: 20px; color: #c4c4c4">卖出的物品</B>
					</div>
					<div class="col-md-12" id="orderBox"
						 style="overflow-y: auto; height: 450px; padding: 5px; background-color: #ffffff;">
<!--						<div class="col-md-12" align="center" style="margin-top: 150px">-->
<!--							<img src="../statics/image/logo/yihan.png" width="95%" ; height="170px;">-->
<!--							<p style="color: #c4c4c4; font-size: 16px">抱歉，暂未卖出物品！</p>-->
<!--						</div>-->
<!--						<a href="/wzh-secondshop/sellerInfo?orderId=${sellGood.id}">-->
<!--							<div class="col-md-12 rev" style="padding: 10px; margin-bottom: 5px;">-->
<!--								<div class="col-md-11" style="padding: 0px;">-->
<!--									<p></p>-->
<!--									<p style="color: #c4c4c4;">${sellGood.submitDate}</p>-->
<!--									<p>-->
<!--										<B style="color: #2aabd2">${sellGood.customer}</B>&nbsp;购买了你的物品&nbsp;-->
<!--										<B style="color: #2aabd2">${sellGood.goodName}</B>-->
<!--									</p>-->
<!--								</div>-->
<!--							</div>-->
<!--						</a>-->
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="footer"></div>
	<script>
		$("#header").load("../home/header.html");
	</script>
	<script>
		$("#footer").load("../home/footer.html");
	</script>

	<script>
		var bar_width = document.getElementById("re-bar").scrollWidth;
		$(function () {
			$(window).scroll(function () {
				if ($(document).scrollTop() >= 20) {
					$("#re-bar").css({
						"position": "fixed",
						"top": 50 + $(document).scrollTop() + "px",
						"width": bar_width,
						"right": 15
					});
				} else {
					$("#re-bar").css({
						"position": "fixed",
						"top": 70 + "px",
						"width": bar_width,
						"right": 15
					});
				}
			})
		});
	</script>

	<script>
		function reviewButton() {
			if (document.getElementById("review-body").style.display === "none") {
				document.getElementById("review-bar").className = "col-md-12 rev-bar";
				$("#reply-bar").slideUp();
				$("#review-body").slideDown();
				$("#adv-bar").slideUp();
			} else {
				document.getElementById("review-bar").className = "col-md-6 rev1-bar";
				$("#reply-bar").slideDown();
				$("#review-body").slideUp();
				$("#adv-bar").slideDown();
			}
		}

		function replyButton() {
			if (document.getElementById("reply-body").style.display === "none") {
				document.getElementById("reply-bar").className = "col-md-12 rev-bar";
				document.getElementById("review-bar").style.display = "none";
				$("#reply-body").slideDown();
				$("#adv-bar").slideUp();
			} else {
				document.getElementById("reply-bar").className = "col-md-6 rev2-bar";
				$("#review-bar").slideDown();
				$("#reply-body").slideUp();
				$("#adv-bar").slideDown();
			}
		}
	</script>

	<script src="../statics/bootstrap-3.3.0/js/bootstrap.js"></script>
	<script src="../statics/jquery-ui-1.12.1/jquery-ui.js"></script>
	<script src="../statics/jquery-ui-1.12.1/datepicker-zh-CN.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>


	<script type="text/javascript">

		<!--进入修改页前从session获取用户原信息并填入输入框-->
		function ajax_send(func){
			$.ajax({
				type:"POST",
				url:"/user/preInfo",
				contentType: "application/json;charset=utf-8",
				data:JSON.stringify(123),
				success:function(data){
					//var data=JSON.parse(data);
					if(data.data.sex == 0){
						var sex = "女"
					}else{
						var sex = "男"
					}
					$('#name').val(data.data.nickName);
					$('#gender').val(sex);
					$('#mobile').val(data.data.phoneNumber);
					$('#email').val(data.data.email);
					$('#oldEmail').val(data.data.email);
					$('#img').attr("src",  "https://yilutangping.oss-cn-shenzhen.aliyuncs.com/userProfileImage/" + data.data.picture);

					func.call(this,data);
				}
			});
		}

		//一种自动调用ajax的方法
		(function(){
			ajax_send(function(res){
			});

		})();
		function checkPassword(){
			var passworrd = $("#oldPass").val();
			var email = $("#email").val();
			var data = email
			$.ajax({
				url: "/user/info",
				type: "POST",
				contentType: "application/json;charset=utf-8",
				data:data,
				success:function (data) {
					if(data.data.password !== passworrd){
						document.getElementById("passwordError").innerHTML = "输入的密码与原密码不一致";
					}else{
						document.getElementById("passwordError").innerHTML = "";
					}
				}
			})
		}
		function checkPassRepeat(){
			var oldPassword = $("#oldPass").val();
			var password = $("#newPass1").val();
			var passwordConfirm = $("#newPass2").val();
			if (password !== passwordConfirm) {
				document.getElementById("passError").innerHTML = "对不起，您2次输入的密码不一致";
			} else if (oldPassword === "" || password === "") {
				document.getElementById("passError").innerHTML = "对不起，不可以为空！";
			} else
				document.getElementById("passError").innerHTML = "";
			}
		function checkPhoneRepeat(){
			var phoneNum = $("#mobile").val();
			var oldEmail = $("#oldEmail").val();
			var data = {
				"phoneNum":phoneNum,
				"oldEmail":oldEmail,
			}
			$.ajax({
				url: "/user/checkPhone",
				type: "POST",
				dataType:"json",
				contentType: "application/json;charset=utf-8",
				data:JSON.stringify(data),
				success:function (data) {
					document.getElementById("phoneError").innerHTML = data.message;
				}
			})
		}
		function checkNameRepeat(){
			var name = $("#name").val();
			var oldEmail = $("#oldEmail").val();
			var data = {
				"name":name,
				"oldEmail":oldEmail,
			}
			$.ajax({
				url: "/user/checkName",
				type: "POST",
				dataType:"json",
				contentType: "application/json;charset=utf-8",
				data:JSON.stringify(data),
				success:function (data) {
					document.getElementById("nameError").innerHTML = data.message;
				}
			})
		}
		function checkEmailRepeat(){
			var email = $("#email").val();
			var oldEmail = $("#oldEmail").val();
			var data = {
				"oldEmail":oldEmail,
				"email":email,
			}
			$.ajax({
				url: "/user/checkEmail",
				type: "POST",
				dataType:"json",
				contentType: "application/json;charset=utf-8",
				data:JSON.stringify(data),
				success:function (data) {
					document.getElementById("emailError").innerHTML = data.message;
				}
			})
		}
		function submitPass() {
			var oldPassword = $("#oldPass").val();
			var password = $("#newPass1").val();
			var passwordConfirm = $("#newPass2").val();
			var pass = {
			"email": $('#email').val(),
			"newPassword": password
		};
			if (password !== passwordConfirm) {
				document.getElementById("passError").innerHTML = "对不起，您2次输入的密码不一致";
			} else if (oldPassword === "" || password === "") {
				document.getElementById("passError").innerHTML = "对不起，不可以为空！";
			} else {
				document.getElementById("passError").innerHTML = "";
					$.ajax({
					type: "POST",
					url: "/user/updatePassword",
					contentType: "application/json; charset=UTF-8",
					dataType: "json",
					data: JSON.stringify(pass),
					success: function (data) {
						Swal.fire({
							type: 'success', // 弹框类型
							title: '提示', //标题
							text: data.message, //显示内容
							confirmButtonColor: '#3085d6',// 确定按钮的 颜色
							confirmButtonText: '确定',// 确定按钮的 文字
						}).then((isConfirm) => {
							try {
								window.location.href = "/home/login.html";
							} catch (e) {
								alert(e);
							}
						});
					},
					error: function (xhr) {
						Swal.fire("提示", data.message, "error");
					}
				});
			}
		}
		function submitInfo() {
			var name = $('#name').val();
			var gender = $('#gender').val();
			var mobile = $('#mobile').val();
			var email = $('#email').val();
			var oldEmail = $('#oldEmail').val();
			var info = {
				"oldEmail":oldEmail,
				"email":email,
				"name":name,
				"gender":gender,
				"mobile":mobile,
			}

			$.ajax({
				type: "POST",
				url: "/user/updateInfo",
				contentType: "application/json; charset=UTF-8",
				// dataType: "json",
				data: JSON.stringify(info),
				success: function (data) {
					Swal.fire({
						type: 'success', // 弹框类型
						title: '提示', //标题
						text: data.message, //显示内容
						confirmButtonColor: '#3085d6',// 确定按钮的 颜色
						confirmButtonText: '确定',// 确定按钮的 文字
					}).then((isConfirm) => {
						try {
							window.location.href = "/home/login.html";
						} catch (e) {
							alert(e);
						}
					});
				},
				error: function (data) {
					Swal.fire("提示", data.message, "error");
				}
			});
		}
		function submitProfileImage(){
			console.log("11111111111111");
			var formData = new FormData();
			formData.append("files", $("#photo")[0].files[0]);    //生成一对表单属性

			$.ajax({
				type:'POST',
				url:"/user/saveProfileImage",
				data:formData,
				contentType:false,
				processData:false,//这个很有必要，不然不行
				// dataType:"json",
				// mimeType:"multipart/form-data",
				success:function(data){
					if (data.code === 20000) {
						// window.location.href = "/index";
						Swal.fire("提示", "头像修改成功", "success");
						console.log($("#photo"))
						$('#img').attr("src",  "null");
						$('#img').attr("src",  "https://yilutangping.oss-cn-shenzhen.aliyuncs.com/userProfileImage/" + data.data.picture);
						// document.getElementById("photoResult").innerHTML = "头像修改成功";
					}
					else{
						Swal.fire("提示", data.message, "error");
					}
				}
			});
		};
	</script>
	<!--右侧订单栏目数据获取-->
	<script type="text/javascript">

		$(function (){
			let userId ="";
			let url = "";
			let phoneNum = "";
			// 获取用户订单
			$.ajax({
				url: "/user/preInfo",
				type: "POST",
				contentType: "application/json;charset=utf-8",
				data: JSON.stringify(123),
				success:function (data){
					userId = data.data.id;
					phoneNum = data.data.phoneNum;
					url = "/order/sellerId/"+userId;
					getOrder(phoneNum);
				}
			});

			function getOrder(phoneNum){
				$.ajax({
					url : url,
					type: "GET",
					data: "",
					contentType: "application/json;charset=utf-8",
					success:function (result){
						addOrderBox(result.data, phoneNum);
					}
				});
			}

			function addOrderBox(result){
				if (result == null || result == ''){
					$("#orderBox").append(
							"<div class='col-md-12' align='center' style='margin-top: 150px'>" +
							"<img src='../statics/image/logo/yihan.png' width='95%'; height='170px';>" +
							"<p style='color: #c4c4c4'; font-size: 16px>抱歉，暂未卖出物品！</p>" +
							"</div>"
					)
				} else {
					$.each(result,function (index, obj){
						$.ajax({
							url : "/user/preInfo",
							type: "POST",
							contentType: "application/json;charset=utf-8",
							data: JSON.stringify(123),
							success:function (result){
								phoneNum = result.data.phoneNumber;
								$("#orderBox").append(
										"<a href='/user/sellerInfo.html?orderId=" +obj['id']+ "&sellerId="+obj['sellerId'] + "'>"+
										"<div class='col-md-12 rev' style='padding: 10px; margin-bottom: 5px;' >" +
										"<div class='col-md-11' style='padding: 0px;'>" +
										"<p></p>"+
										"<p style='color: #c4c4c4;'>" + obj['submitDate'] + "</p>" +
										"<p>" +
										"<B style='color: #2aabd2'>" + obj['customer'] + "</B>"+ "&nbsp;购买了你的物品&nbsp;"+
										"<B style='color: #2aabd2'>" + obj['goodName'] + "</B><br>" +
										"&nbsp;对方联系方式为："+
										"<B style='color: #2aabd2'>" + phoneNum + "</B>" +
										"</p>" +
										"</div>" +
										"</div>" +
										"</a>"
								)
							}
						});

					})
				}
			}
		});

	</script>
</body>
</html>